<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>风险管理</el-breadcrumb-item>
			<el-breadcrumb-item>预警风险</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- card -->
		<el-card>
			<div class="box">
				<div class="top">
					<el-tooltip class="item" effect="dark" content="预警风险" placement="top-start">
						<el-button style="background-color:cornflowerblue"><big>预警风险</big></el-button>
					</el-tooltip>
				</div>
			</div>

			<el-table :data="risklistList" style="width: 100%">

				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="风险描述:">
								<span>{{ props.row.probabi }}</span>
							</el-form-item>
							<el-form-item label="风险征兆:">
								<span>{{ props.row.signs }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="风险名称" prop="title">
				</el-table-column>
				<el-table-column label="风险类别" prop="ranges">
				</el-table-column>
				<el-table-column label="风险描述" prop="probabi">
				</el-table-column>
				<el-table-column label="风险状态" prop="states">
				</el-table-column>
				<el-table-column label="风险是否可控" prop="judges">
				</el-table-column>
				<el-table-column label="风险征兆" prop="signs">
				</el-table-column>
				<el-table-column label="风险预案" prop="yuan">
				</el-table-column>
				<el-table-column label="风险后果" prop="methods">
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template slot-scope="scope">
						<el-button-group>
							<!-- 删除按钮 -->
							<el-button type="danger" icon="el-icon-delete " @click="removeById(scope.row.id)"></el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>

		</el-card>

	</div>
</template>

<script>
	export default {
		created() {
			this.getRisklistList();
		},
		data() {
			return {
				queryInfo: {
					//和后端QueryInfo实体的属性一致
					query: '',
					pageNum: 1,
					pageSize: 5,
				},
				queryInfo1: {
					//和后端QueryInfo实体的属性一致
					id: JSON.parse(window.sessionStorage.getItem('Id')),
					pageNum: 1,
					pageSize: 5,
				},
				risklistList: [], //人员信息列表
				total: 0, //总记录数
				search: '', //查询表单数据
			}
		},
		methods: {
			async getRisklistList() {

				//console.log(this.queryInfo1);
				const {
					data: resString
				} = await this.$http.get("getrisklist", {
					params: this.queryInfo1
				}); //②接收后台返回的string数据： ①访问后台
				this.risklistList = resString.riskyujingList;
			},
			async removeById(id) {
				//弹框询是否确定删除
				const confirmResult = await this.$confirm('此操作将永久删除该预警风险, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}, ).catch(err => err)
				if (confirmResult !== "confirm") {
					return this.$message.info('已取消删除');
				}
				const {
					data: spa
				} = await this.$http.delete("deleterisklist?id=" + id)
				if (spa !== "ok") {
					return this.$message.error('操作失败！');
				}
				this.$message.success('操作成功！');
				this.getRisklistList();

			},

		}
	}
</script>

<style lang="less" scoped>
	.box {
		margin-bottom: 10px;

	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}


	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}
</style>
